<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			li {
				list-style: none;
			}
			
			.header_right>ul>li {
				float: left;
				padding: 0px 11px;
			}
			
			.header_right>ul>li>a {
				font-size: 11px;
				color: #000000;
			}
			
			.header_right>ul>li>ul>li {
				font-size: 11px;
				color: #000000;
			}
			
			.header_right {
				position: absolute;
				top: 25px;
				right: 0;
			}
			
			.header_right>ul {
				width: 450px;
				position: absolute;
				top: 0;
				right: 15px;
			}
			
			.header_right>ul>li>ul {
				border: 1px solid gainsboro;
				position: relative;
				top: 5px;
				left: -20px;
				display: none;
			}
			
			.header_right>ul>li>ul>li {
				padding: 5px 10px;
				position: relative;
			}
			
			.header_right>ul>li>ul>li:hover {
				/*background-color: deepskyblue;*/
				color: white;
			}
			
			.header_right>ul>li>ul>li>span{
				position: absolute;
				display: block;
				width: 0px;
				height: 20px;
                transition: all 0.4s; 				 
				 
			}
			
			.header_right>ul>li>ul>li:hover>span{
				width: 50px;
				background-color: deepskyblue;
			}
			
			
			
			.header_right>ul>li:nth-child(8):hover >ul {
				display: block;
			}
			/* 更多产品====================================================================================================*/
			/*假如,出现点击某些部分没有反应。一般都是因为不小心被覆盖了。 怎么处理。使用相对定位，然后调整z-index
			   因为，相对定位不会改变标签的位置。
			 * */
			
			.header_right .more>span {
				position: relative;
				color: white;
				background-color: #00BFFF;
				padding: 2px;
				font-size: 13px;
				margin-right: 10px;
				z-index: 999;
			}
			
			.header_right .more .right {
				width: 70px;
				height: 1000px;
				position: absolute;
				top: -25px;
				right: 0;
				display: none;
			}
			
			.header_right .more>span:hover {
				background-color: gray;
				color: black;
			}
			
			.header_right .more:hover .right {
				background-color: gray;
				display: block;
			}
			/*百度一下*/
			
			.content {
				width: 645px;
				text-align: center;
				position: absolute;
				top: 30%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			
			.content img {
				width: 270px;
				height: 120px;
			}
			
			.content .input-contianer {
				width: 645px;
				height: 35px;
				/*相对定位一般用于自己不动，但是自己的子元素要相对自己设置位置*/
				position: relative;
			}
			
			.content .input-contianer input[type=text] {
				width: 544px;
				height: 33px;
				/*输入框的默认外边框*/
				outline: none;
				border: 1px solid #00BFFF;
				border-right: none;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.content .input-contianer input[type=button] {
				width: 100px;
				height: 35px;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #00BFFF;
				border-color: #00BFFF;
				outline: none;
			}
			
			.content .input-contianer a {
				display: block;
				width: 19px;
				height: 17px;
				background: url(img/camera_new_5606e8f.png);
				position: absolute;
				top: 50%;
				right: 113px;
				transform: translateY(-50%);
			}
			/*小相机换颜色*/
			
			.content .input-contianer a:hover {
				background-position: 0px -20px;
			}
		</style>
	</head>

	<body>
		<div class="header_right">
			<ul>
				<li><a href="#">新闻</a></li>
				<li><a href="#">hao123</a></li>
				<li><a href="#">地图</a></li>
				<li><a href="#">视频</a></li>
				<li><a href="#">贴吧</a></li>
				<li><a href="#">学术</a></li>
				<li><a href="#">登陆</a></li>
				<li>
					<a href="#">设置</a>
					<ul>
						<li><span></span>搜索设置</li>
						<li><span></span>高级搜索</li>
						<li><span></span>关闭预测</li>
						<li><span></span>搜索历史</li>
					</ul>
				</li>
			</ul>
			<div class="more">
				<span>更多产品</span>
				<div class="right">
				</div>
			</div>
		</div>

		<div class="content">
			<img src="img/bd_logo1.png" />
			<div class="input-contianer">
				<input type="text" /><input type="button" value="百度一下" />
				<a href="#"></a>
			</div>
		</div>

	</body>

</html>